<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        // 相信你一定觉得，颜色只能用一种太单调了，能不能和时代接轨，用渐变的色彩呢，多炫酷啊。答案是可以的，我们一起来看下。

        // ctx自带一个线性渐变创建方法，需要传入四个参数: 位置x, 位置y, 宽度, 高度；该方法返回一个渐变色对象。
        let line = ctx.createLinearGradient(0,0,800,600);//这样就代表从canvas的左上角渐变到右下角

        //addColorStop给渐变色对象添加色彩方案，第一个参数为标识，也就是每个色彩开始的位置，0为开始，1为结束。中间也可以有小数，你想渐变得越复杂，就可以写更多。第二个参数为色彩值，同样支持css中的所有色彩方式
        line.addColorStop(0,'#67C23A');
        line.addColorStop(0.5,'rgb(225, 243, 216)');
        line.addColorStop(1,'rgb(240, 249, 235)');
        // 最后把搞好的渐变方案对象赋值给ctx的fillStyle即可，像之前赋值颜色一样。
        ctx.fillStyle = line;
        // 画个图形就能看到效果了
        ctx.fillRect(0,0,800,600);
    </script>
</body>
</html>